<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./tab.css">
</head>
<body>
<div class="tab--container">
    <ul class="tab--toggleBar">
        <li class="tab--toggleBar__item tab--toggleBar__item__active">tab-1</li>
        <li class="tab--toggleBar__item">tab-2</li>
        <li class="tab--toggleBar__item">tab-3</li>
    </ul>
    <ul class="tab--content">
        <li class="tab--content__item tab--content__item__show">content-1</li>
        <li class="tab--content__item">content-2</li>
        <li class="tab--content__item">content-3</li>
    </ul>
</div>
</body>
<script>
    var toggleBarList = document.getElementsByClassName('tab--toggleBar__item');
    var contentList = document.getElementsByClassName('tab--content__item');
    for (var i = 0; i < toggleBarList.length; i++){
        toggleBarList[i]['data-index'] = i;
        toggleBarList[i].onclick = function () {
            toggle(toggleBarList, this['data-index'], ['tab--toggleBar__item', 'tab--toggleBar__item__active']);
            toggle(contentList, this['data-index'], ['tab--content__item', 'tab--content__item__show']);
        }
    }
    function toggle (list, index, classArr) {
        for (var i = 0; i < list.length; i++){
            list[i].className = classArr[0];
        }
        list[index].className = (classArr + '').replace(',', " ");
    }



    function Tab (config) {
        this.config = config;
        this.render();
    }

    Tab.prototype = {
        render: function () {
            this.container = document.createElement('div');
            this.setAttr(this.container, 'style', {
                width: this.config.width +'px',
                height: this.config.height +'px'
            });
            this.setAttr(this.container, 'className', 'tab--container');
            this.toggleBar = document.createElement('ul');
            this.toggleBar.className = 'tab--toggleBar';
            this.toggleBar.style.height = this.config.toggleBarHeight + 'px';
            this.content = document.createElement('ul');
            this.content.className = 'tab--content';
            this.content.style.height = (this.config.height - this.config.toggleBarHeight) + 'px';
            for(var i = 0; i < this.config.title.length; i++){
                var toggleBarItem = document.createElement('li');
                toggleBarItem.className = 'tab--toggleBar__item';
                toggleBarItem.style.width = (100 / this.config.title.length) + '%';
                toggleBarItem.innerText = this.config.title[i];
                var contentItem = document.createElement('li');
                contentItem.innerText = this.config.content[i];
                contentItem.className = 'tab--content__item';
                this.toggleBar.appendChild(toggleBarItem);
                this.content.appendChild(contentItem);
            }
            this.container.appendChild(this.toggleBar);
            this.container.appendChild(this.content);
            document.body.appendChild(this.container);
        },
        setAttr: function (dom, attrName, attrValue) {
            function parseStyle (o) {
                var str = '';
                for (var prop in o){
                    str += prop + '=' + o[prop] + ';';
                    console.log(o[prop]);
                    // console.log(str);
                }
                return str;
            }
            if(attrName === 'className'){
                dom[attrName] = attrValue;
            }
            if(attrName === 'style'){
                dom[attrName].cssText = parseStyle(attrValue);
            }
        }
    };
    var tab = new Tab({
        width: 400,
        height: 200,
        toggleBarHeight: 80,
        title: ['tab-1','tab-2','tab-3','tab-4','tab-5'],
        content: ['tab-1','tab-2','tab-3','tab-4','tab-5'],
    });

    // console.log(this);
    console.log(tab);







</script>
</html>